<template>
  <view>
    <!--  -->
    <!-- <u-navbar :background="{background: '#fff'}" back-icon-color="#222222" title-color="#222222" :title="list[0].department_name"></u-navbar> -->
    <!-- <view class="" style="font-size: 30rpx;color: #1A9EFF;background: #fff;text-align: center;line-height: 99rpx;font-weight: bold;" v-if="list!=''">
			{{list[0].department_name}}医生
		</view> -->
    <u-navbar :background="{ background: '#fff' }" back-icon-color="#222222" title-color="#222222" title="医生列表" :border-bottom="false"></u-navbar>

    <!-- 医生 -->
    <view class="" v-if="list != ''">
      <view class="" style="margin: 28rpx; background: #fff; border-radius: 20rpx; padding-bottom: 44rpx" v-for="(i, k) in list" :key="k" @tap="detail(i.doctor_id)">
        <view class="" style="display: flex; margin-top: 28rpx">
          <view class="" style="position: relative; margin: 43rpx 35rpx 0 30rpx">
            <image :src="i.doctor_avatar" mode="aspectFill" style="width: 112rpx; height: 112rpx; border-radius: 50%"></image>
            <view
              class=""
              style="
                width: 64rpx;
                height: 34rpx;
                background: #ff7251;
                border-radius: 17rpx;
                font-size: 22rpx;
                color: #fff;
                text-align: center;
                line-height: 34rpx;
                position: absolute;
                top: 89rpx;
                left: 23rpx;
              "
            >
              {{ i.level_name }}
            </view>
          </view>
          <!-- 医师信息 -->
          <view class="" style="padding-top: 50rpx">
            <view class="" style="display: flex; align-items: flex-end">
              <view class="" style="font-size: 32rpx">
                {{ i.doctor_name }}
              </view>
              <view class="" style="font-size: 26rpx; padding-left: 16rpx">
                {{ i.doctor_title }}
              </view>
              <view class="" style="">有号</view>
            </view>

            <view class="" style="display: flex; align-items: flex-end; font-size: 26rpx; color: #666666; padding-top: 10rpx">
              <view class="">
                {{ i.department_name }}
              </view>
              <view class="" style="padding-left: 29rpx">
                {{ i.hospital_name }}
              </view>
            </view>

            <view class="" style="display: flex; align-items: center; padding-top: 10rpx">
              <view class="">
                <text style="font-size: 28rpx; color: #e50014">{{ i.score }}</text>
                <text style="font-size: 26rpx; color: #999999; padding-left: 9rpx">分</text>
              </view>
              <view class="" style="padding-left: 26rpx">
                <text style="font-size: 28rpx; color: #e50014">{{ i.evaluate_nums }}</text>
                <text style="font-size: 26rpx; color: #999999; padding-left: 9rpx">评价</text>
              </view>
              <view class="" style="padding-left: 27rpx">
                <text style="font-size: 28rpx; color: #e50014">{{ i.order_nums }}</text>
                <text style="font-size: 26rpx; color: #999999; padding-left: 9rpx">服务数</text>
              </view>
            </view>
            <view class="" style="font-size: 26rpx; color: #999999; padding-top: 15rpx; padding-right: 50rpx">擅长：{{ i.disease }}</view>
            <view class="" style="display: flex; align-items: center; margin-top: 10rpx; flex-wrap: wrap">
              <view class="btn" style="background: #ffede8; margin-right: 30rpx; margin-top: 10rpx" v-for="m in i.lable">
                {{ m.label_title }}
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <view class="" style="font-size: 28rpx; color: #999; text-align: center; padding-top: 50rpx" v-else>暂无数据~</view>
  </view>
</template>

<script>
export default {
  name: '',
  data() {
    return {
      id: null,
      page: 1,
      list: [],
      hospital_id: '',
      disease_id: ''
    };
  },
  //方法
  methods: {
    hosp() {
      this.api({
        url: '/api/doctor/getList',
        method: 'post',
        data: {
          page: this.page,
          department_id: this.id,
          hospital_id: this.hospital_id,
          disease_id: this.disease_id
        }
      }).then((res) => {
        this.list = this.list.concat(res.data);
        this.page++;
      });
    },
    detail(e) {
      uni.navigateTo({
        url: '/doctor/doctor/doctor?id=' + e
      });
    }
  },
  //首页渲染
  onLoad(options) {
    this.id = options.id;
    if (options.hospital_id) {
      this.hospital_id = options.hospital_id;
    }
    if (options.disease_id) {
      this.disease_id = options.disease_id;
    }
    this.hosp();
  },
  //监听
  watch: {},
  //计算属性
  computed: {}
};
</script>

<style lang="scss" scoped>
page {
  background: #f8f8f8;
}
.btn {
  width: 140rpx;
  height: 41rpx;
  background: #fff1e5;
  border-radius: 4rpx;
  text-align: center;
  line-height: 41rpx;
  font-size: 24rpx;
  color: #ff801e;
}
</style>
